<template>
    <div :class="`review-member ${mode}`">
        <LabelLine title="会员折扣" :prefix="`享${cardInfo.discount}折`" :value="discountPrice / 100" :isPrice="true" :isTheme="true" :isNegative="true" />
        <LabelLine title="会员余额" :value="totalPrice / 100" :isPrice="true" :isTheme="true" :isNegative="true">
            <div slot="title" class="price-value"><span class="label">￥</span>{{ cardInfo.balance / 100 }}</div>
            <TSwitch
                slot="value"
                class="action-switch"
                v-model="useCardPay"
                :disabled="!isCanChange"
                :active-color="theme"
                size="24px"
                inactive-color="#7D7D83"
                :style="useCardPay ? opcityBg(1) : ''"
                @change="changePayType"
            />
        </LabelLine>
        <LabelLine title="充值此卡" placeholder="立即充值" :isLink="true" @click="rechargeAction" />
    </div>
</template>

<script>
import { Switch } from 'vant';
import { MiniIcon } from '@components/base';
import { LabelLine } from '@components/shop';
import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewMember', // 会员信息
    mixins: [ModeMixin],
    components: {
        TSwitch: Switch,
        MiniIcon,
        LabelLine,
    },
    props: {
        cardInfo: {
            type: Object,
            default: () => {},
        },
        discountPrice: {
            type: Number,
            default: 0,
        },
        totalPrice: {
            type: Number,
            default: 0,
        },
        memberAmount: [Number, Boolean],
        isUseMemberPay: Boolean,
        isCanChange: Boolean,
    },
    watch: {
        isUseMemberPay(val) {
            this.useCardPay = val;
        },
    },
    data() {
        return {
            useCardPay: false,
        };
    },
    mounted() {
        this.useCardPay = this.$props.isUseMemberPay;
    },
    methods: {
        changePayType(checked) {
            this.$emit('changePayType', checked);
        },
        rechargeAction() {
            this.$emit('recharge');
        },
    },
};
</script>

<style lang="less">
@color-gold: #CBA07F;
.review-member {
    background-color: @white;
    .p-h(@gap-md);
    .radius-and-shandow();
    &.black {
        background-color: @black-bg-color;
    }
    .action-switch {
        .m-l(@gap);
    }
    .van-switch__node {
        z-index: 0;
    }
    .price-value {
        .font-size();
        .m-l(@gap-sm);
        font-family: @font-family-number;
        .label {
            .m-r(-3);
        }
    }
}
</style>
